<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<div class="panel">
    <div id="classes-heading" class="panel-heading bg-gray-light">
        <h3 class="panel-title">指标卡片<span id="title-duty-name-target" class="text-muted"> | </span></h3>
    </div>

    <div class="panel-body">
        <form th:id="'form_target_input'+${target?.id}" class="form-horizontal" autocomplete="off">
            <input type="hidden" name="keyId" th:value="${target?.id}">
            <input type="hidden" name="flowDutyId">
            <input type="hidden" name="flowDutyName">

            <div class="form-group" th:if="${target!=null && !#strings.isEmpty(target?.targetNo)}">
                <label class="col-md-2 control-label">指标编号</label>
                <div class="col-md-8">
                    <input disabled type="text" id="targetNo" th:value="${target?.targetNo}" class="form-control" placeholder="指标编号">
                </div>
            </div>

            <div class="form-group">
                <label class="col-md-2 control-label">指标名称<i class="fa fa-asterisk txt-color-red"></i></label>
                <div class="col-md-8">
                    <input type="text" name="name" id="name" th:value="${target?.name}" class="form-control" placeholder="指标名称">
                </div>
            </div>

            <div class="form-group">
                <label class="col-md-2 control-label">指标分类<i class="fa fa-asterisk txt-color-red"></i></label>
                <div class="col-md-8">
                    <select id="targetClassDictId" name="targetClassDictId" class="form-control">
                        <option value="">请选择</option>
                        <option th:each="dict : ${targetClassDictList}" th:id="${dict.id}" th:value="${dict.id}" th:text="${dict.name}" th:selected="${dict == target?.targetClassDict}"></option>
                    </select>
                </div>
            </div>

            <div class="form-group">
                <label class="col-md-2 control-label">指标重要等级<i class="fa fa-asterisk txt-color-red"></i></label>
                <div class="col-md-8">
                    <div class="radio">
                        <input type="radio" name="level" id="level1" value="1" class="magic-radio" th:checked="${target?.level == 1}" >
                        <label for="level1">一级</label>
                        <input type="radio" name="level" id="level2" value="2" class="magic-radio" th:checked="${target?.level == 2}" >
                        <label for="level2">二级</label>
                        <input type="radio" name="level" id="level3" value="3" class="magic-radio" th:checked="${target?.level == 3}" >
                        <label for="level3">三级</label>
                    </div>
                </div>
            </div>

            <div class="form-group" id="parentTargetDiv">
                <label class="col-md-2 control-label">上级指标</label>
                <div class="col-md-8">
                    <input type="text" id="parentTargetName" th:value="${parentTargetName}" class="form-control" placeholder="选择上级指标">
                    <input type="hidden" name="parentTargetId" id="parentTargetId" th:value="${target?.parentTargetId}" class="form-control">
                </div>
            </div>

            <div class="form-group">
                <label class="col-md-2 control-label">指标标签</label>
                <div class="col-md-8">
                    <input type="text" name="targetLabel" id="targetLabel" th:value="${target?.targetLabel}" class="form-control" placeholder="指标标签">
                </div>
            </div>

            <div class="form-group" id="relatedTargetDiv">
                <label class="col-md-2 control-label">关联指标</label>
                <div class="col-md-8">
                    <input type="text" name="relatedTargetNames" id="relatedTargetNames" th:value="${target?.relatedTargetNames}" class="form-control" placeholder="">
                    <input type="hidden" name="relatedTargetIds" id="relatedTargetIds" th:value="${target?.relatedTargetIds}" class="form-control">
                </div>
            </div>


        </form>
    </div>
</div>

<script th:inline="javascript">
    var editType = [[${editType}]];
    var keyId_target = [[${target?.id}]];
    var flowData_target = {
        keyId : keyId_target ? keyId_target : "create",
        formId : "form_target_input"+[[${target?.id}]],
        path : "com.hanqian.kepler.core.entity.primary.core.Target",
        titleId : "title-duty-name-target"
    };
    var $form = $("#"+flowData_target.formId);

    $(function(){
        __flow_duty_handle(flowData_target);
        __flow_button_input_handle(flowData_target, fn_target_save, fn_target_commit);
        fn_target_input_validate();

        __select2(flowData_target.formId + " #targetClassDictId");
        initRelatedTargetTagInput();
        initEditType();
    });

    $("#targetClassDictId").on("select2:open", function(){
        if($("#parentTargetId").val()){
            __toastr_warning("指标分类需要和上级指标同步");
            $("#targetClassDictId").select2("close")
            return false;
        }
    })

    //修改类型
    function initEditType(){
        if("label" === editType){
            $form.find("#name,#targetClassDictId,#level1,#level2,#level3,#parentTargetName,.amsify-suggestags-input").attr("disabled", true);
            $("#relatedTargetDiv .amsify-suggestags-input").css("background-color", "#FFF");
            $form.find("#targetLabel").focus();
        }
        if("related" === editType){
            $form.find("#name,#targetClassDictId,#level1,#level2,#level3,#targetLabel,#parentTargetName").attr("disabled", true);
        }
    }

    //关联指标：初始化tag标签样式
    function initRelatedTargetTagInput(){
        $("#relatedTargetNames").amsifySuggestags();
        $("#relatedTargetDiv").find(".amsify-remove-tag").remove();
    }

    //选择关联指标
    $("#relatedTargetDiv").on("focus", "input[class='amsify-suggestags-input']", function(){
        var layxId = "target_to_target";
        var $relatedTargetIds = $form.find("input[name='relatedTargetIds']");
        var $selectedNames = $form.find("input[name='relatedTargetNames']");
        var selectedIds = $relatedTargetIds.val();
        var selectedNames = $selectedNames.val();
        var dataUrl = ctx + "target/list?ignoreIds=" + keyId_target;
        var colNames = ["指标名称","指标分类","指标重要等级","id"];
        var colModel = [
            {name: 'name', index: 'name', width: 100, sortable: false, searchoptions: {sopt: ['cn']}},
            {name: 'targetClassDict.name', index: 'targetClassDict.name', width: 100, sortable: false, searchoptions: {sopt: ['cn']}},
            {name: 'targetLevelStr', index: 'targetLevelStr', width: 100, sortable: false, searchoptions: {sopt: ['cn']}},
            {name: 'id', index: 'id', width: 100, key: true, hidden: true}
        ];
        __common_dialog_selects(layxId, "关联指标", dataUrl, colNames, colModel, selectedIds, selectedNames, function(data){
            console.log(data);
            $relatedTargetIds.val(data.ids);
            $selectedNames.val(data.names);
            __layX_close(layxId);

            //刷新标签栏
            $("#relatedTargetNames").amsifySuggestags({}, "refresh");

            //不允许直接手动删除，所以移除每个标签的×
            $("#relatedTargetDiv").find(".amsify-remove-tag").remove();
        });
    });

    //选择父级指标
    $("#parentTargetName").on("focus", function(){
        var layxId = "target_to_target_parent";
        var $parentTargetName = $form.find("input[id='parentTargetName']");
        var $parentTargetId = $form.find("input[name='parentTargetId']");
        var parentId = $parentTargetId.val();
        var parentName = $parentTargetName.val();
        var dataUrl = ctx + "target/list?formType=parentSelect&ignoreIds=" + keyId_target;
        var colNames = ["指标名称","指标分类","指标分类id","指标重要等级","层级数","id"];
        var colModel = [
            {name: 'name', index: 'name', width: 100, sortable: false, searchoptions: {sopt: ['cn']}},
            {name: 'targetClassDict.name', index: 'targetClassDict.name', width: 100, sortable: false, searchoptions: {sopt: ['cn']}},
            {name: 'targetClassDict.id', index: 'targetClassDict.id', width: 100, sortable: false, hidden: true},
            {name: 'targetLevelStr', index: 'targetLevelStr', width: 100, sortable: false, searchoptions: {sopt: ['cn']}},
            {name: 'pathCount', index: 'pathCount', width: 100, sortable: false, hidden: true},
            {name: 'id', index: 'id', width: 100, key: true, hidden: true}
        ];
        __common_dialog_select(layxId, "父级指标", dataUrl, colNames, colModel, parentId, parentName, function(data){
            console.log(data);
            if(data.pathCount > 5){
                __toastr_warning("主动配置最大层级为5级")
            }else{
                $parentTargetId.val(data.id);
                $parentTargetName.val(data.name);
                __layX_close(layxId);

                //刷新标签栏
                $("#relatedTargetNames").amsifySuggestags({}, "refresh");

                //选择父级指标后，强行将当前指标的指标分类设置为和父级一样的
                var classId = data["targetClassDict.id"];
                if(classId){
                    $("#targetClassDictId").val(classId).select2();
                }
            }
        });
    })

    //表单验证
    function fn_target_input_validate(){
        __init_validate(flowData_target.formId, {
            rules : {
                name : {required : true},
                targetClassDictId : {required : true},
                level : {required : true}
            }
        });
    }

    //保存方法
    function fn_target_save(){
        var url = "target/save";
        if("label" === editType){
            url = "target/saveLabel";
        }else if("related" === editType){
            url = "target/saveRelated";
        }

        __confirm_dialog("", "确认保存吗？", function(){
            __form_save(flowData_target.formId, ctx + url, function(data){
                if(data && data.state === 1){
                    __flow_close_layx(flowData_target);
                }
            })
        })
    }

    //提交方法
    function fn_target_commit(){
        if(!$("#" + flowData_target.formId).valid()){
            return false;
        }
        __confirm_dialog("", "确认提交吗？", function(){
            __form_save(flowData_target.formId, ctx + "target/commit", function(data){
                if(data && data.state === 1){
                    __flow_close_layx(flowData_target);
                }
            })
        })
    }

</script>

</html>